<template>
    <nav-bar class="detail-nav">
        <img slot="left" class="back" @click = "backClick" src="~assets/img/common/back.svg">
        <div class="title" slot="center">
            <span class="title-item" v-for="(item, index) in titleInfos" :key="index" :class="{'active': index===currentIndex}" @click="itemClick(index)">
                {{item}}
            </span>
        </div>
    </nav-bar>
</template>

<script>
    import NavBar from 'components/common/navbar/NavBar'

    export default {
        name: 'DetailNavBar',
        components: {
            NavBar
        },
        props: {
            titleInfos: {
                type: Array,
                default: () =>{
                    return ['商品', '参数', '评论', '推荐']
                }
            },

            currentIndex: {
                type: Number,
                default: 0
            }
        },
        methods: {
            backClick() {
                // 返回上一级
                this.$router.go(-1)
            },
            itemClick(index) {
                // 让父级知道点击的那个按钮
                this.$emit('itemClick', index);
            }
        }
    }
</script>

<style scoped>
    .detail-nav {
        background-color: #fff;
        font-weight: normal;
    }

    .title {
        height: 100%;
        display: flex;
        padding: 0 20px;
        font-size: 14px;
        justify-content: space-around;
    }

    .back {
        margin-top: 12px;
    }

    .title-item.active {
        color: var(--color-high-text);
    }
</style>